<template>
    <div>
        HomeProps, {{msg}}
        <i class="el-icon-platform-eleme"></i>
        <el-button type="primary" icon="el-icon-search">搜索</el-button>
    
    
        <el-table :data="tableData" 
            stripe 
            border
            v-loading.fullscreen.lock="loading"
            style="width: 100%">
            <el-table-column prop="date" label="日期" width="180"></el-table-column>
            <el-table-column prop="name" label="姓名" width="180"></el-table-column>
            <el-table-column prop="address" label="地址"></el-table-column>
        </el-table>
    
    
        <a-button type="danger"> Dangersssss </a-button>
        <a-range-picker @change="onChange" />


        

    
    </div>
</template>

<script>
import Darkmode from 'darkmode-js';
const options = {
    bottom: '64px', // default: '32px'
    right: 'unset', // default: '32px'
    left: '32px', // default: 'unset'
    time: '0.5s', // default: '0.3s'
    mixColor: '#fff', // default: '#fff'
    backgroundColor: '#fff',  // default: '#fff'
    buttonColorDark: '#100f2c',  // default: '#100f2c'
    buttonColorLight: '#fff', // default: '#fff'
    saveInCookies: false, // default: true,
    label: '🌓', // default: ''
    autoMatchOsTheme: true // default: true
}

export default {
    
    name: 'Homeprop',
    /* 
        子组件使用props来声明需要从父组件接收的数据
    */
    props: {
        msg: {
            type: String,
            default: '父组件未传递数据'
        }
    },
    data() {
        return {
            loading: false,
            tableData: [
                { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, 
                { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄' }, 
                { date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄' }, 
                { date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1516 弄' }
            ],
            
        }
    },
    created() {
        const darkmode = new Darkmode(options);
        darkmode.showWidget();

        console.log( this.$store.state.count, this.$store )
        this.$store.commit('increment')
    },
    mounted() {
        // console.log('<<< HomeProp >>>');
        this.closeLoad()
    },
    
    methods: {
        closeLoad(){
            let loadTimout;
            clearTimeout( loadTimout )
            setTimeout(function(){
                this.loading = false
                // console.log( this.loading );
            }, 2000)
        },
        onChange(date, dateString) {
            console.log(date, dateString);
        },
        
    },
}
</script>

<style>


</style>